<template>
  <div>
    <h2>数据统计</h2>
    <el-card>
      <div ref="chartRef" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import http from '@/utils/http'

const chartRef = ref(null)

const renderChart = (xData, yData) => {
  const chart = echarts.init(chartRef.value)
  const option = {
    title: {
      text: '本月订单趋势',
      left: 'center',
      textStyle: { color: '#4a2e18' }
    },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: xData },
    yAxis: { type: 'value' },
    series: [
      {
        name: '订单数',
        type: 'line',
        data: yData,
        smooth: true,
        lineStyle: { color: '#c19a6b' },
        areaStyle: { color: 'rgba(193,154,107,0.2)' }
      }
    ]
  }
  chart.setOption(option)
}

onMounted(async () => {
  const res = await http.get('admin/orders/')
  const xData = res.data.map(item => item.date)
  const yData = res.data.map(item => item.count)
  renderChart(xData, yData)
})
</script>
